<%--
  Created by IntelliJ IDEA.
  User: 24588
  Date: 2022-08-31
  Time: 21:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script type="text/javascript">
<%--        用这个函数来判断函数是否存在--%>
        function checkName(dname) {
            //根据名字判断用户是否存在
            console.log(dname);
            //该方法是做不到检查用户名是否存在的,因为用户名全部保存在数据库中,所以我们需要定义一个接口(Servlet);让当前方法能调用它
            //目前接口定义完了,在js中如何调用?调用的本质就是发送一个请求
            // location.href="http://localhost:8080/Dept?action=checkName&name="+name;//相当于超链接

            //使用sjax发送一个异步的请求
                //创建一个XMLHttpRequest对象
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    // 用于现代浏览器的代码
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // 应对老版本 IE 浏览器的代码
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //4.设置回调函数(异步请求主动来调用),这个函数会多次调用
                xmlhttp.onreadystatechange=function(){
                    console.log(xmlhttp.readyState);
                    //xmlhttp.readyState==4:服务端做出来了响应(但是响应错误也是响应完成成了)
                    //xmlhttp.status==200,请求成功
                    if(xmlhttp.readyState==4&&xmlhttp.status==200){//readyState请求的状态
                        //服务端做出了响应,可获取数据
                        var data=xmlhttp.responseText;

                        document.getElementById("nameMsg").innerText=data;
                    }
                }


                //2.设置请求的方式和url  true是异步,false是同步
                xmlhttp.open("GET","http://localhost:8080/Dept?action=checkName&dname="+dname,true);

                //3.发送请求
                xmlhttp.send();

        }
    </script>
</head>
<body>
<h3>添加新部门</h3>
<form method="post" action="http://localhost:8080/Dept?action=add">
   <table border="1">
       <tr>
           <td>部门id:</td>
           <td>
               <%--               //给输入框绑定一个失去焦点事件--%>
               <input type="text" name="deptno" value="78" onblur="checkName(this.value)">
               <span id="nameMsg"></span>
           </td>
       </tr>
       <tr>
           <td>部门姓名:</td>
           <td>
               <input type="text" name="dname" value="天下第一">
           </td>
       </tr>
       <tr>
           <td>部门位置:</td>
           <td>
               <input type="text" name="loc" value="德兴">
           </td>
       </tr>
       <tr>
           <td colspan="2">
               <input type="submit" value="添加">
               <input type="reset" value="重置">
           </td>
       </tr>
   </table>
</form>

</body>
</html>
